<template>
  <div id="app">
    <!--3.引用组件-->
    <!--驼峰-->
    <!--<wtyHeader></wtyHeader>-->
    <!--小短线-->
    <!--<wty-header></wty-header>-->
    <!--<wty-sass></wty-sass>-->
    <!--
      <wty-props :foods="foodList" :info="info"></!--<wty-props>
    <wty-event :count="count" @count="_count"></wty-event>
    <button @click="_changeCount">changeCount</button>
    <wty-slot>
      <input type="text">
    </wty-slot>
    -->
    <wty-anim1></wty-anim1>
    <wty-anim2></wty-anim2>
  </div>
</template>

<script>
// 1.引入组件
import wtyHeader from "./components/01/wty-header"; // ./ 相对路径，@ 绝对路径
import wtySass from "./components/01/wty-sass";
import wtyProps from "./components/01/wty-prop";
import wtyEvent from "./components/01/wty-event";
import wtySlot from "./components/01/wty-slot";
import wtyAnim1 from "./components/01/wty-anim1";
import wtyAnim2 from "./components/01/wty-anim2";

export default {
  data() {
    return {
      foodList: [{ name: "苹果" }, { name: "香蕉" }],
      info: "传递的信息",
      count: 1
    };
  },
  methods: {
    _changeCount() {
      this.count++;
    },
    _count(arg, obj) {
      console.log("数值被改变:" + arg);
      console.log(obj);
    }
  },
  // 2.注册组件 components:{}
  components: {
    wtyHeader,
    wtySass,
    wtyProps,
    wtyEvent,
    wtySlot,
    wtyAnim1,
    wtyAnim2
  }
};
</script>

<style></style>
